<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>忘记密码</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet"></script>
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
<h1>忘记密码</h1>
<fieldset>
    <legend>提问方式</legend>
    <form action="">
        <div>
            <label>账号：</label><input name="name" placeholder="请输入账号"/><span id="nameMsg"></span><br>
            <label>中学老师姓什么：</label><input name="q1" placeholder="中学老师姓什么" type="password"/><span id="q1Msg"></span><br>
            <label>宠物名是什么：</label><input name="q2" placeholder="你的宠物名是什么" type="password"/><span id="q2Msg"></span><br>
            <label>隔壁老王叫什么：</label><input name="q3" placeholder="隔壁老王的名字" type="password"/><span id="q3Msg"></span><br>
            <hr>
            <label>新密码：</label><input name="pwd" placeholder="请输入新密码" type="password"/><span id="pwdMsg"></span><br>
            <label>确认密码：</label><input name="repwd" placeholder="请输入确认密码"/><span id="repwdMsg"></span><br>
            <div style="width: 350px;text-align: right">
                <button>修改密码</button>
            </div>
        </div>
    </form>
</fieldset>

<fieldset>
    <legend>邮件方式</legend>
    <form action="">
        <div>
            <label>账号：</label><input v-model="uname" placeholder="请输入账号"/><span id="name1Msg"></span><br>
            <div style="width: 350px;text-align: right">
                <button @click.prevent="forget">发送验证码邮件</button>
            </div>
            <hr>
            <label>验证码：</label><input v-model="vcode" placeholder="请输入验证码" type="password"/><span id="vcodeMsg"></span><br>
            <label>新密码：</label><input v-model="pwd" placeholder="请输入新密码" type="password"/><span id="pwd1Msg"></span><br>
            <label>确认密码：</label><input v-model="repwd" placeholder="请输入确认密码"/><span id="repwd1Msg"></span><br>
            <div style="width: 350px;text-align: right">
                <button @click.prevent="setPwd">修改密码</button>
            </div>
        </div>
    </form>
</fieldset>
</div>
<script>
    var v = new Vue({
        el:"#app",
        data:{
            vcode:"", uname:"", pwd:"", repwd:""
        },
        methods:{
            forget(){
                axios.get("user/forgetPwd?uname="+this.uname).then(res=>{
                    if(res.data.code == 1){
                        this.$message(res.data.msg);
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            },
            setPwd(){
                axios.get("user/resetPwd?",{
                    params:{
                        vcode : this.vcode, pwd: this.pwd, repwd: this.repwd
                    }
                }).then(res=>{
                    if(res.data.code == 1){
                        this.$message(res.data.msg);
                    } else {
                        this.$alert(res.data.msg);
                    }
                })
            }
        }

    })
</script>

</body>
</html>














































<style>
    * {
        vertical-align: middle;
        text-decoration: none;
    }

    fieldset,h1 {
        width: 50%;
        margin: 40px auto;
    }

    div {
        line-height: 50px;
    }

    span {
        display: inline-block;
        width: 200px;
        line-height: 30px;
        vertical-align: middle;
        color: red
    }

    input, span, select {
        width: 200px;
        height: 30px;
        text-align: center;
        box-sizing: border-box;
    }

    label {
        min-width: 150px;
        display: inline-block;
        padding: 0px 5px;
        box-sizing: border-box;
    }

    legend{
        background-color: #ddd;
        padding: 5px 10px;
        border-radius: 5px;
        font-weight: bold;
        color: #555;
    }

</style>